<template>
	<view class="StudyPlan" :class="{'theme--Black':CurrentTheme.name==='DarkMode'}">
		<!-- 导航栏 -->
		<u-navbar title-color="#fff" back-icon-color="#ffffff" is-back="true" :background="background" :back-text-style="{ color: '#fff' }"
		 title="学习打卡计划" back-icon-name="nav-back">
			<view class="navbar-right" slot="right">
				<view class="dot-box right-item fo-white paddlr20">
					<text class="cuIcon-refresh fo-46 mr20" @click="AsyncData"></text>
					<text class="cuIcon-roundadd fo-46" @click="onAdd"></text>
				</view>
			</view>
		</u-navbar>
		<!-- 内容-列表 -->
		<card :list='list'></card>
		<!-- 暂无计划 -->
		<view v-if="list.length===0" class="norecord">
			<view class="flex flex-col ali-cen center-center">
				<image src="../../../static/img/community/no_data.png" class="yicon-200">
					<text class="fo-gray mt10">暂无计划，赶紧添加计划吧~</text>
			</view>
		</view>

		<!-- 弹出层 -->
		<u-popup v-model="popupShow" mode="bottom" border-radius="14">
			<view class="pop-head flex just-spa-bet fo-white fo-40">
				<view class=" ">添加计划</view>
				<view class="flex ali-cen">
					<text class="cuIcon-check mr20" @click="AddPlane"></text>
					<text class="cuIcon-close" @click="popupShow=false"></text>
				</view>
			</view>
			<view class="popup padd20">
				<view class="pb10 mt20 flex just-spa-bet ali-cen" style="border-bottom: skyblue 1px solid;">
					<input placeholder="请输入计划名称" v-model="StudyPlanName" />
					<text class="cuIcon-close" v-show="StudyPlanName.length>0" @click="StudyPlanName=''"></text>
				</view>
				<view style="height: 200px;"></view>
			</view>
		</u-popup>

		<u-tabbar v-model="current" :list="TarbarList" :mid-button="false" @change='onTarBarChange'></u-tabbar>
	</view>
</template>

<script>
	import card from './components/Card/index.vue'
	import {API$AsyncStyudyPlaneData} from '@/common/API/StudyPlane.js'
	export default {
		name: "",
		data() {
			return {
				background: {
					background: '#87ceeb'
				},
				list: [], // 传给组件的数据
				popupShow: false, // 弹出层是否显示
				StudyPlanName: '', // 计划名称

				TarbarList: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: '可视化分析',
						customIcon: false,
					}
				],
				current: 0

			}
		},
		components: {
			card
		},
		onReady() {
			this.initLocalData()
			// this.AsyncData()
		},
		onUnload() {
			uni.$off('StudyPlane')
		},
		onLoad() {
			this.background.background = this.CurrentTheme.navColor
			uni.$on('StudyPlane',(res)=>{
				let {type} = res
				if(type==='Call_initLocalData'){
					this.initLocalData()
				}
			})
		},
		methods: {
			// 本地缓存数据库
			initLocalData() {
				let IsGuide = this.$pub.getStorageSync('IsGuide');
				// if (IsGuide.Boolean) {
				// 	//软件第一次使用就添加
				// 	this.list = [{
				// 			title: "学习计划1",
				// 			times: "共花费了：0天 0小时 0分钟"
				// 		},
				// 		{
				// 			title: "这个是标题",
				// 			times: "这边会累计添加您花费的时间"
				// 		},
				// 		{
				// 			title: "向左滑动可操作置顶和删除",
				// 			times: "一旦删除了这个学习计划他的数据就会清空"
				// 		},
				// 		{
				// 			title: "不想清空但又完成了可以添加归档操作",
				// 			times: "一旦归档,这条记录就不可添加，只可读和删除"
				// 		}
				// 	]
				// } else {

				// }
				let data = this.$pub.getStorageSync('StudyPlane')
				this.list = data ? this.$pub.getStorageSync('StudyPlane') : []
			},
			// 有网的情况下将本地数据同步到服务器
			AsyncLocalData() {

			},
			// 导航栏按钮
			onAdd() {
				this.popupShow = true
			},
			// 添加计划
			AddPlane() {
				if (this.StudyPlanName.trim().length === 0) return this.$pub.Toast('计划名称不能为空~')
				console.log(this.list)
				this.list.push({
					LocalId: this.$tool.create_timeName(),
					title: this.StudyPlanName,
					times: "0.0.0",
					StartTime: new Date().getTime(),
					Child: [] // 每次添加的子记录
				})
				this.StudyPlanName = ''
				this.popupShow = false
				this.$pub.setStorageSync('StudyPlane', this.list)
			},
			// 底部跳转
			onTarBarChange(e) {
				if (e === 1) {
					this.$pub.redirTo('/pages/other/StudyPlane/VisualAnalysis/index')
				}
			},
			// 同步记录到数据库
			async AsyncData(){
				// this.$pub.Toast('同步数据到云端开发中~');
				uni.showLoading({
					title:'同步中',
					mask:true
				})
				try{
					let  {code,msg,data} = await API$AsyncStyudyPlaneData({
						Datas:this.$pub.getStorageSync('StudyPlane')
					})
					this.$pub.Toast(msg)
					if(code===200){
						this.$pub.setStorageSync('StudyPlane',data)
						this.initLocalData()
					}
				}catch(e){
					
				}finally{
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.StudyPlan {
		height: 100vh;
		padding: 20rpx;
		overflow: scroll;
	}

	/* 弹窗部分 */
	.pop-head {
		padding: 20rpx 20rpx;
		background-color: skyblue;
		border-radius: 10rpx 10rpx 0 0;
	}
</style>
